﻿@{
    ViewBag.Title = "FileManage";
    ViewBag.Description = "管理服务器上的文件，主要支持全盘搜索。";
}

<div class="page-content">
    <div class="page-header">
        <h1>文件管理
			<small>
                <i class="icon-double-angle-right"></i>
                @ViewBag.Description
            </small>
        </h1>
    </div>
    <!-- /.page-header -->

    <div class="row">
        <div class="col-xs-12">
            <div class="widget-box">
                <div class="widget-header header-color-green2">
                    <h4 class="lighter smaller">
                        Browse Files
                        <div class="pull-right">
                            <span id="btnScan" class="label label-lg label-pink arrowed-right cursor-hand"
                                data-loading-text="Scanning..." data-finish-text="输出结果">Start Scanning</span>&nbsp;
                        </div>
                    </h4>
                </div>

                <div class="widget-body">
                    <div class="widget-main padding-8">
                        <div class="dd dd-draghandle">
                            <ol class="dd-list" data-bind="template: { name: 'treeBowser-template', foreach: items }">
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@*        <div class="col-xs-8">
        </div>*@
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>
<!-- /.page-content -->

@section cssPagePlugin {
    <link rel="stylesheet" href="/assets/css/jquery.gritter.css" />
}
@section styles {
    <style type="text/css">
        .cursor-hand {
            cursor: pointer;
        }

            .cursor-hand[disabled] {
                cursor: not-allowed;
            }

        .dd {
            max-width: 100%;
        }
    </style>
}
@section jsPagePlugin {
    <script src="/assets/js/jquery.nestable.min.js"></script>
    <script src="/assets/js/jquery.gritter.min.js"></script>
}
@section scripts {
    @AssetsHelper.RenderJS(paths: "jquery.signalR");

    <script type="text/html" id="treeBowser-template">
        <li class="dd-item dd2-item">
            <div class="dd-handle dd2-handle">
                <i data-bind="css: 'icon-' + Type"></i>
            </div>
            <div class="dd2-content">
                <span data-bind="text: Name"></span>
                <div class="pull-right">
                    <a href="#" data-bind="attr: { 'title': 'file:///' + Path }" target="_blank"><i class="icon-external-link"></i></a>
                </div>
            </div>
            <!-- ko if: 'folder' == Type -->
            <ol class="dd-list" data-bind="template: { name: 'treeBowser-template', foreach: items }">
            </ol>
            <!-- /ko -->
        </li>             
    </script>

    <script type="text/javascript">
        ko.Application.prototype.items = ko.observableArray();

        /*$( function () {
            $( '.dd' ).nestable();

            $( '.dd-handle a' ).on( 'mousedown', function ( e ) {
                e.stopPropagation();
            } );

            $( '[data-rel="tooltip"]' ).tooltip();
        } );*/

        function searchItem( items, path ) {
            var itemResult;
            $.each( items, function ( i, item ) {
                if ( item.Path == path ) {
                    itemResult = item;
                    return false;
                }

                if ( item.Type == 'folder' ) {
                    itemResult = searchItem( item.items(), path );
                    if ( itemResult ) return false;
                }
            } );
            return itemResult;
        };

        function outputResult() {
            $( '<textarea />' ).val( JSON.stringify( ko.controller.items() ) )
                .css( { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, zIndex: 99999 } )
                .appendTo( 'body' );
        };

        $( function () {
            // Reference the auto-generated proxy for the hub.  
            var fileManage = $.connection.fileManageHub;
            // Create a function that the hub can call back to display items.
            fileManage.client.receiveItem = function ( item ) {
                if ( item.Type == 'error' ) {
                    console.error( item.Message );
                    $.gritter.add( {
                        title: '',
                        text: item.Message,
                        sticky: true,
                        time: '',
                        class_name: 'gritter-info'
                    } );
                    return false;
                } else if ( item.Type == 'folder' ) {
                    item.items = ko.observableArray();
                }

                if ( item.ParentPath ) {
                    var pItem = searchItem( ko.controller.items(), item.ParentPath );
                    if ( pItem ) {
                        pItem.items.push( item );
                        return;
                    }
                }

                ko.controller.items.push( item );
            };
            fileManage.client.onScanOver = function () {
                $( '#btnScan' ).button( 'finish' ).click( function () {
                    outputResult();
                } );
                alert( '全盘扫描结束！' );
            }
            
            $.connection.hub.start().done( function () {
                $( '#btnScan' ).one( 'click', function () {
                    $( '#btnScan' ).button( 'loading' );
                    // Call the ScanDisks method on the hub. 
                    fileManage.server.scanDisks( 'D:\\[FA]下载临时文件\\H-Anime' );
                } );
            } );
        } );
    </script>
}